<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/table.css">
    <title>Document</title>
</head>
<body>

<main>
    <nav class="page_navigate">
        <h1>UU博客用户管理页面</h1>
    </nav>
    <table class="myTbale">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>昵称</th>
                <th>密码</th>
                <th>性别</th>
                <th>电话</th>
                <th>email</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张行</td>
                <td>悔创阿里杰克马</td>
                <td>123</td>
                <td>男</td>
                <td>4542113</td>
                <td>12317246@qq.com</td>
                <td>
                    <div class="rowOperationGroup"data-id="1">
                        <div class="copy-img"></div><span class="divButton_text">复制</span>
                        <div class="delete-img"></div><span class="divButton_text">删除</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>张行</td>
                <td>悔创阿里杰克马</td>
                <td>123</td>
                <td>男</td>
                <td>4542113</td>
                <td>12317246@qq.com</td>
                <td>
                    <div class="rowOperationGroup"data-id="2">
                        <div class="copy-img"></div><span class="divButton_text">复制</span>
                        <div class="delete-img"></div><span class="divButton_text">删除</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>张行</td>
                <td>悔创阿里杰克马</td>
                <td>123</td>
                <td>男</td>
                <td>4542113</td>
                <td>12317246@qq.com</td>
                <td>
                    <div class="rowOperationGroup"data-id="3">
                        <div class="copy-img"></div><span class="divButton_text">复制</span>
                        <div class="delete-img"></div><span class="divButton_text">删除</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>张行</td>
                <td>悔创阿里杰克马</td>
                <td>123</td>
                <td>男</td>
                <td>4542113</td>
                <td>12317246@qq.com</td>
                <td>
                    <div class="rowOperationGroup"data-id="4">
                        <div class="copy-img"></div><span class="divButton_text">复制</span>
                        <div class="delete-img"></div><span class="divButton_text">删除</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>张行</td>
                <td>悔创阿里杰克马</td>
                <td>123</td>
                <td>男</td>
                <td>4542113</td>
                <td>12317246@qq.com</td>
                <td>
                    <div class="rowOperationGroup"data-id="5">
                        <div class="copy-img"></div><span class="divButton_text">复制</span>
                        <div class="delete-img"></div><span class="divButton_text">删除</span>
                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
                <tr>
                        <td colspan="8">
                            <nav class="operationGroup">
                                <div class="add-img"></div><span class="divButton_text">新增</span>
                            </nav>
                            <nav class="pageGroup">
                                <div class="pageNumber_disable"><span class="pageNumber_text"><<</span> </div>
                                <div class="pageNumber_disable"><span class="pageNumber_text">1</span></div>
                                <div class="pageNumber"><span class="pageNumber_text">2</span></div>
                                <div class="pageNumber"><span class="pageNumber_text">3</span></div>
                                <div class="pageNumber"><span class="pageNumber_text">4</span></div>
                                <div class="pageNumber"><span class="pageNumber_text">5</span></div>
                                <div class="pageNumber"><span class="pageNumber_text">>></span></div>
                            </nav>
                        </td>
                    </tr>
        </tfoot>
    </table>

</main>
    
</body>
</html>

<script>
        function updateUser(id){
            alert("update user:"+id);
        }
        function deleteUser(id){
            alert("delete user:"+id);
        }
        function operation(event){
            let value="";
            let id=0;
            let eventTarget=event.target;
            if(eventTarget.tagName.toLowerCase()=="span"){
                value=eventTarget.innerHTML;
            }else if(eventTarget.tagName.toLowerCase()=="div"){
                value=eventTarget.nextElementSibling.innerHTML;
            }
            id=eventTarget.parentNode.parentNode.dataset.id;
            switch(value){
                case "修改" :updateUser(id);break;
                case "删除" :deleteUser(id);break;
            }
        }
    document.getElementById("myTbody").addEventListener("click",operation,false);
    </script>